<template>
  <div id="newsPage">
    <div v-show="this.listType == 1 || this.listType == 2">
      <!-- <Breadcrumb :data="{category: result.category,columnName: '列表页'}"   /> -->
      <div v-if="dataList.length > 0">
        <div class="list">
          <p
            class="clearfix"
            v-for="(item, i) in dataList"
            :key="i"
            @click="toDetail(item)"
          >
            <span class="fl" v-if="item.hasOwnProperty('pudDate')"
              ><i class="el-icon-v"></i>{{ item.pudDate | timecycleYMD }}</span
            >
            <span class="fl" v-else
              ><i class="el-icon-v"></i
              >{{ item.createTime | timecycleYMD }}</span
            >
            <span class="fl title">{{ item.title }}</span>
          </p>
        </div>

        <div class="pagination">
          <Pagination
            style="margin-top: 20px"
            v-show="parseInt(pageObj.count) > 0"
            :total="parseInt(pageObj.count)"
            @change="getList"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
          />
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
    <div v-show="this.listType == 3 || this.listType == 4">
      <div class="newsDetail" v-if="dataList.length > 0">
        <p class="title">{{ dataList[0].title }}</p>
        <p class="subTitle" v-if="dataList[0].subTitle">
          {{ dataList[0].subTitle }}
        </p>
        <div class="content-wrap-in" v-html="content"></div>
      </div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import {
  openApiSysPolicyQuery,
  openApiSysNoticeQueryNoticeBySys,
} from '@/api/openApi'
export default {
  data() {
    return {
      dataList: [],
      dataPage: {},
      content: '',
      result: {},
      currentPage4: 0,
      listQuery: {
        //首页图数据源查询条件
        page: 1,
        limit: 15,
      },
      pageObj: {},
      listType: '',
    }
  },
  watch: {
    listType(val) {
      this.listType = val
      this.dataList = []
      this.getList()
    },
    $route(to, from) {
      this.listQuery.page = 1
      this.listType = this.$route.query.listType
    },
  },
  methods: {
    getList() {
      if (this.listType == 1 || this.listType == 3 || this.listType == 4) {
        this.getNotice()
      }
      if (this.listType == 2) {
        this.getPolicy()
      }
    },
    // 通知公告
    getNotice() {
      var data = {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        type: this.listType,
        isShow: 0,
      }

      openApiSysNoticeQueryNoticeBySys(data).then((res) => {
        this.dataList = res.data.data
        this.pageObj = res.data
        this.articleStyleInit(this.dataList[0].content)
      })
    },
    // 政策法规
    getPolicy() {
      openApiSysPolicyQuery(this.listQuery).then((res) => {
        this.dataList = res.data.data
        this.pageObj = res.data
      })
    },
    toDetail(item) {
      this.$router.push({
        path: '../newsDetail',
        query: { type: 8, id: item.id, listType: this.listType },
      })
    },
    articleStyleInit(content) {
      this.content = content
        .replace(/&nbsp;/gi, '') //清除空格
        .replace(/\s+style="[^"]*"/g, '') //清除style样式
        .replace(
          /\<img/gi,
          '<img style="max-width: 90%;margin: 10px auto;display: inherit;border: 1px solid #eee;"',
        ) //设置图片class
    },
  },
  created() {
    this.listType = JSON.parse(this.$route.query.listType)

    this.getList()
  },
}
</script>

<style lang="scss" scoped>
#newsPage {
  // border-top: 1px solid #b60303;
  width: 1000px;
  margin: 0 auto;
  min-height: 600px;

  .list {
    font-size: 16px;
    p {
      border-bottom: 1px solid #ccc;
      padding: 15px;
      cursor: pointer;
    }
    p:hover {
      color: #b60303;
    }
    i {
      font-size: 24px;
      color: #b60303;
      vertical-align: -3px;
    }
    .fr {
      height: 24px;
      line-height: 24px;
    }
    .el-icon-v {
      display: inline-block;
      background: url(../../../../assets/training/rl.png) no-repeat left;
      background-size: 100% 100%;
      width: 12px;
      height: 15px;
      margin-right: 9px;
      margin-top: 4px;
    }
    .title {
      padding-left: 20px;
    }
  }
  .pagination {
    // padding-top: 30px;
  }

  .newsDetail {
    .title {
      font-size: 28px;
      font-weight: 900;
      text-align: center;
      padding: 20px 0;
      color: #a7201f;
    }
    .subTitle {
      text-align: center;
      font-size: 16px;
      padding: 15px 0;
    }
    .title-detail {
      text-align: center;
      span {
        display: inline-block;
        padding-right: 30px;
        color: #909399;
        font-size: 12px;
      }
      border-bottom: 1px dashed #ddd;
      margin: 10px 25px;
      padding-bottom: 20px;
    }
    .text {
      padding: 20px;
      text-indent: 2em;
    }
  }
  .content-wrap-in {
    color: #333;
    text-indent: 2em;
    font-size: 16px !important;
    line-height: 2;
    span {
      color: #333;
      text-indent: 2em;
      font-size: 16px;
      line-height: 2;
    }
    .img-style {
      max-width: 90%;
      margin: 0 auto;
      display: inherit;
      font-family: '微软雅黑';
    }
  }
}
</style>